<script setup lang="ts">
import { BankOutlined, CopyOutlined } from '@ant-design/icons-vue';

import { errimage } from '#/base';
import { copyToClipboard } from '#/utils';

defineProps<{
  itemData?: any;
}>();
// const itemData = props.itemData;
</script>

<template>
  <div v-if="itemData">
    <a-space :size="10" direction="vertical">
      <a-tag color="orange"> <BankOutlined /> {{ itemData.shopName }} </a-tag>
      <a-space align="start">
        <a-image
          :fallback="errimage"
          :src="itemData.mainPic || 'err'"
          :width="80"
          style="border-radius: 8px"
        />
        <a-space :size="0" direction="vertical">
          <div class="w-64">
            {{ itemData.goodsTitle }}
          </div>
          <a-space>
            <div class="text-xs text-gray-500">
              商品ID: {{ itemData.productId }}
            </div>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(itemData.productId);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
          <div class="text-xs text-gray-500">规格: {{ itemData.skuStr }}</div>
          <div class="text-xs text-gray-500">
            价格: ¥{{ itemData.dyAmountStr }}
          </div>
          <!-- <div class="text-xs text-gray-500">
            价格: {{ itemData.salePrice }}
          </div> -->
        </a-space>
      </a-space>
    </a-space>
  </div>
</template>
